<template>
  <Scrollbar
    ref="scrollbarRef"
    class="scroll-container"
    :scrollHeight="scrollHeight"
    v-bind="$attrs"
  >
    <slot></slot>
  </Scrollbar>
</template>

<script lang="ts" setup>
import { ref, unref, nextTick } from "vue";
import { Scrollbar, ScrollbarType } from "@/components/Scrollbar";
import { useScrollTo } from "@vben/hooks";
import { type Nullable } from "@vben/types";

defineOptions({ name: "ScrollContainer" });

defineProps({
  scrollHeight: {
    type: Number,
  },
});

const scrollbarRef = ref<Nullable<ScrollbarType>>(null);

function getScrollWrap() {
  const scrollbar = unref(scrollbarRef);
  if (!scrollbar) {
    return null;
  }
  return scrollbar.wrap;
}

/**
 * Scroll to the specified position
 */
function scrollTo(to: number, duration = 500) {
  const wrap = unref(getScrollWrap());
  nextTick(() => {
    if (!wrap) {
      return;
    }
    const { start } = useScrollTo({
      el: wrap,
      to,
      duration,
    });
    start();
  });
}

/**
 * Scroll to the bottom
 */
function scrollBottom() {
  const wrap = unref(getScrollWrap());
  nextTick(() => {
    if (!wrap) {
      return;
    }
    const scrollHeight = wrap.scrollHeight as number;
    const { start } = useScrollTo({
      el: wrap,
      to: scrollHeight,
    });
    start();
  });
}

defineExpose({
  scrollTo,
  scrollBottom,
});
</script>
<style lang="less">
.scroll-container {
  width: 100%;
  height: 100%;

  .scrollbar__wrap {
    margin-bottom: 18px !important;
  }

  .scrollbar__view {
    box-sizing: border-box;
  }
}
</style>
